<template>
  <wrapper>
    <div>
      <button @click="reduce">-</button>
      {{ msgs }}
      <button @click="add">+</button>
    </div>
  </wrapper>
</template>
<script>
import {
  mapState,
  //  mapGetters,
  mapActions,
} from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    reduce() {
      console.log("-", this.data1);
      this.reduceData(Number(this.data1) - 1);
    },
    add() {
      console.log("+", this.data1);
      this.addData(Number(this.data1) + 1);
    },
    ...mapActions(["reduceData"]),
    ...mapActions(["addData"]),
  },
  computed: {
    ...mapState(["data1"]),
    msgs() {
      return this.$store.state.data1;
    },
  },
};
</script>